<template>
  <div class="chat-msg">
    <div class="lpp">
      <van-nav-bar :title="$store.state.name" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <van-tabbar v-model="active" active-color="#07c160">
      <van-tabbar-item icon="phone-o">换电话</van-tabbar-item>
      <van-tabbar-item icon="chat">换微信</van-tabbar-item>
      <van-tabbar-item icon="notes-o" @click="sendJianli">发简历</van-tabbar-item>
      <van-tabbar-item icon="close" @click="goback">不感兴趣</van-tabbar-item>
    </van-tabbar>
    <ul>
      <van-cell-group v-show="flag">
        <van-cell is-link title="头像">
          <template slot="right-icon">
            <img :src="info.src" alt class="pic" />
          </template>
        </van-cell>
        <van-field
          v-model="info.name"
          required
          clearable
          label="姓名"
          right-icon="question-o"
          placeholder="请输入真实名字"
          @click-right-icon="$toast('question')"
        />
        <van-field
          v-model="info.sex"
          required
          clearable
          label="年龄"
          right-icon="question-o"
          placeholder="年龄"
          @click-right-icon="$toast('question')"
        />
        <van-field
          v-model="info.time"
          required
          clearable
          label="工作时间"
          right-icon="question-o"
          placeholder="工作时间"
          @click-right-icon="$toast('question')"
        />
        <van-field
          v-model="info.weixin"
          required
          clearable
          label="微信号"
          right-icon="question-o"
          placeholder="微信号"
          @click-right-icon="$toast('question')"
        />
        <van-field
          v-model="info.year"
          required
          clearable
          label="出生年月"
          right-icon="question-o"
          placeholder="出生年月"
          @click-right-icon="$toast('question')"
        />
        <van-field
          v-model="info.youshi"
          required
          clearable
          label="我的优势"
          right-icon="question-o"
          placeholder="我的优势"
          @click-right-icon="$toast('question')"
        />
      </van-cell-group>
      <div
        v-for="(item,index) in message_array"
        :key="index"
        :class="[item.status==0?'jinali_div':'boss']"
      >
        <img :src="item.img" alt class="picimg" />
        <li>{{item.message}}</li>
      </div>
      <!-- <div class="boss" v-for="(el,index) in dataInfo" :key="index+'s'">
        <img :src="work.img" alt />
        <li>{{el}}</li>
      </div>-->
      <!-- <div class="boss">
        <img :src="work.img" alt />
        <li>哈哈哈</li>
      </div>-->
      <div class="bottom_input">
        <input type="text" v-model="message" autofocus="autofocus" />
        <button @click.enter="dealMessage" class="send_btn">发送</button>
      </div>
    </ul>
  </div>
</template>
<script>
import { Dialog } from 'vant'
export default {
  inject: ['reload'],
  data: () => ({
    message_array: [],
    message: '',
    active: '',
    info: {},
    flag: false,
    img: '',
    work: {},
    dataInfo: [],
    boss: [
      '你有什么想问的吗?',
      '8k呢',
      '可以现在过来面试',
      '你接受加班吗',
      '你有男朋友吗?',
      '把你的简历发过来给我看下',
      '你怕是面向华哥开发',
      '我吴亦凡可以帮你介绍彭于晏',
      '岳麓区麓谷企业广场A2栋3单元306千锋教育',
      '我现在比较忙,你有时间就可以直接过来'
    ]
  }),
  created () {
    // this.$store.state.isBottom = false
    this.zhixiing()
    this.$store.state.activeinfo = 2
    this.reload()
  },
  // 强制页面刷新
  // watch: {
  //   $route () {
  //     this.$router.go(0)
  //   }
  // },
  methods: {
    goback () {
      this.$router.go(-1)
    },
    dealMessage: function () {
      if (this.message === '') return
      const jianli = JSON.parse(localStorage.getItem('jianli'))

      this.message_array.push({
        message: this.message,
        status: 0,
        img: jianli.src
      })
      var msg = this.message
      this.message = ''
      var index = 0
      setTimeout(() => {
        if (
          msg.indexOf('您好') !== -1 ||
          msg.indexOf('你好') !== -1 ||
          msg.indexOf('在') !== -1
        ) {
          index = 0
        } else if (
          msg.indexOf('工资') !== -1 ||
          msg.indexOf('薪资') !== -1 ||
          msg.indexOf('钱') !== -1
        ) {
          index = 1
        } else if (
          msg.indexOf('面试') !== -1 ||
          msg.indexOf('时间') !== -1 ||
          msg.indexOf('什么时候') !== -1
        ) {
          index = 2
        } else if (
          msg.indexOf('单身') !== -1 ||
          msg.indexOf('一个人') !== -1 ||
          msg.indexOf('女孩子') !== -1
        ) {
          index = 4
        } else if (
          msg.indexOf('地址') !== -1 ||
          msg.indexOf('公司') !== -1 ||
          msg.indexOf('哪里') !== -1
        ) {
          index = 8
        } else {
          index = 6
        }
        console.log(index)
        this.message_array.push({
          message: this.boss[index],
          status: 1,
          img: this.work.img
        })
        if (index === 1) {
          setTimeout(() => {
            index = 3
            this.message_array.push({
              message: this.boss[index],
              status: 1,
              img: this.work.img
            })
          }, 800)
        }
        if (index === 2) {
          setTimeout(() => {
            index = 5
            this.message_array.push({
              message: this.boss[index],
              status: 1,
              img: this.work.img
            })
          }, 1000)
        }
        if (index === 4) {
          setTimeout(() => {
            index = 7
            this.message_array.push({
              message: this.boss[index],
              status: 1,
              img: this.work.img
            })
          }, 900)
        }
      }, 1000)

      // console.log(jianli)
      // this.img = jianli.src
      // this.$store.dispatch('worklist_list')

      // this.flag = !this.flag
      var self = this
      setTimeout(function () {
        self.fill()
      }, 1000)
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    sendJianli () {
      Dialog.confirm({
        message: '你确定要发给他简历吗?'
      })
        .then(() => {
          const jianli = JSON.parse(localStorage.getItem('jianli'))
          console.log(jianli)
          this.info = jianli
          this.flag = !this.flag
        })
        .catch(() => {})
    },
    zhixiing () {
      const li = localStorage.getItem('worklist')
      this.work = JSON.parse(li)
      console.log(this.work)
      // this.$router.go(0)
    },
    fill () {
      // var arr = []
      // // return arr.filter(el => {
      // //   if (this.message.includes(a)) {
      // //     return arr
      // //   }
      // // })
      // if (a.includes('你好')) {
      //   const b = '请问需要咨询什么问题?'
      //   return b
      // }
      const data = [
        { message: '什么时候有时间过来面试', status: 1, img: this.work.img }
      ]
      this.dataInfo = data
    }
  }
}
</script>

<style lang="less" scoped>
ul {
  height: 518px;
  overflow-y: auto;
  background: #eff7ff;
  .jinali_div {
    height: 46px;
    // padding-right: 43px;
    li {
      float: right;
      padding: 0 5px;
      background: #eefaff;
      height: 38px;
      background: white;
      border-radius: 10px;
      margin-top: 8px;
      text-align: right;
      line-height: 38px;
    }
    .picimg {
      width: 30px;
      float: right;
      margin: 12px 6px 0 12px;
    }
  }
}
.boss {
  height: 46px;
  img {
    width: 30px;
    float: left;
    margin: 11px 15px 0 5px;
  }
  li {
    float: left;
    padding: 0 5px;
    background: #eefaff;
    height: 38px;
    background: white;
    border-radius: 10px;
    margin-top: 8px;
    text-align: right;
    line-height: 38px;
  }
}
input {
  width: 83%;
  margin-bottom: 3px;
  height: 42px;
  border: 1px solid #ccc;
  border-radius: 34px;
  position: absolute;
}
.send_btn {
  height: 48px;
  background: #4dd599;
  border: none;
  width: 82px;
  position: relative;
  left: 297px;
  text-indent: 1em;
}
.bottom_input {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 999;
  input{
    text-indent: 1em;
  }
}
</style>
<style scoped>
.chat-msg >>> .van-hairline--top-bottom {
  position: static;
}
.chat-msg >>> .pic {
  width: 30px;
}
.chat-msg >>> .van-cell-group {
  width: 76%;
  margin: 0 auto;
}
.chat-msg {
  position: relative;
  z-index: 999;
  width: 100%;
  overflow-x: hidden;
}

</style>
